<template>
    <div class="loading-overlay">
        <LoadingIcon theme="primary" :small="false" :text="message"/>
        <span class="loading-message text-primary" v-if="message">{{ message }}</span>
    </div>
</template>

<script>
import LoadingIcon from "../loading-icon/LoadingIcon.vue";

export default {
    name: 'TnxbsvLoadingMask',
    components: {LoadingIcon},
    props: {
        message: {
            type: String,
            default: '',
        },
    },
    data() {
        return {};
    },
    mounted() {
        document.body.classList.add('no-scroll')
    },
    beforeUnmount() {
        document.body.classList.remove('no-scroll');
    },
    methods: {}
}
</script>

<style>
.no-scroll {
    overflow: hidden !important;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bs-white-rgb), 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2147483647; /* 浏览器支持的最大值 */
}

.loading-overlay .spinner-border {
    opacity: 0.7;
}

.loading-overlay .loading-message {
    margin-top: 0.25rem;
    opacity: 0.7;
}
</style>
